<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型布局练习</title>
		<style type="text/css">
			body{
				background: #dadfe7;
			}
			.big{
				width:420px;
				height:410px;
				margin:0 auto;
				padding:20px;
				background: white;
			}
			.box{
				border:10px solid #dadfe7;
				width:180px;
				height:175px;
			}
			.left{
				float:left;
				width:100px;
				padding:0px 2px 10px 15px;
				font-size:16px;
				font-family: "微软雅黑";			
			}
			.right{
				float:right;	
				margin-top:117px;
			}
			img{
				width:50px;
				height:50px;
				padding-right:9px;	
			}
			h3{
				font-size:16px;
				font-weight:600;
			}
		</style>
	</head>
	<body>
		<!--大盒子-->
		<div class="big">
			
			<!--第一个盒子-->
			<div class="box" style="float: left;">
				<div class="left">
					<h3>采购</h3>
					<p>有创意的想法和充满欲望的开创未来联合聘用人才。</p>
				</div>
				<div class="right">
					<img src="img/png-0.png" alt="" />
				</div>
				
			</div>
			
			
			<!--第二个盒子-->
			<div class="box" style="float: right;">
				<div class="left">
					<h3>招聘信息</h3>
					<p>基于多年的社区能力的经验 ，充分发挥聘请人才。</p>
				</div>
				<div class="right">
					<img src="img/png-1.png" alt="" />
				</div>
			</div>
			
			
			<!--第三个盒子-->
			<div class="box" style="float: left;margin-top:20px;">
				<div class="left">
					<h3>文员</h3>
					<p>所有营的工作人员总是在一起，可以是一个招聘称职的员工。</p>
				</div>
				<div class="right">
					<img src="img/png-2.png" alt="" />
				</div>
			</div>
			
			
			<!--第四个盒子-->
			<div class="box" style="float: right;margin-top:20px;">
				<div class="left">
					<h3>呼叫中心坐席</h3>
					<p>客户需要伸出援助之手，每当你使用一个代理来</p>
				</div>
				<div class="right">
					<img src="img/png-3.png" alt="" />
				</div>
			</div>
			
			
			
			
		</div>
		
	</body>
</html>
